servicesRes.vue?9b36:359 <template>
    <div class="atoname" :class="datas.cmpt_class || []" :style="datas.cmpt_style || {}">
        <div class="panination">
            <el-pagination
                @current-change="currentPageChange"
                @size-change="sizeChange"
                :background="pageData.pageBackground"
                :prev-text="pageData.prevText"
                :next-text="pageData.nextText"
                :current-page.sync="pageData.currentPage"
                :page-sizes="pageData.pagesizes"
                :page-count="pageData.pagerCount"
                :page-size="pageData.pagesize"
                :layout="pageData.layout"
                :total="pageData.total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
export default {
    name: 'paginationcmpt',
    props: {
        full: Boolean,
        datas:{
            type: Object,
            default() {
                return {
                    // background 是否为分页按钮添加背景色
                    // curren-tPage 当前页数
                    // page-count 页码按钮的数量，当总页数超过该值时会折叠
                    // page-sizes 每页显示个数选择器的选项设置
                    // page-size 每页显示条目个数
                    // prev-text next-text 替代图标显示的上/下一页文字
                    // total 总条目数
                    // layout 组件布局，子组件名用
                    attr_data_conf:{
                        pageBackground:true,
                        currentPage:1,
                        pagerCount:10,
                        pagesizes:[10,20,30,40,50],
                        pagesize:20,
                        prevText:"上一页",
                        nextText:"下一页",
                        total:300,
                        layout:"total,sizes,prev,pager,next,jumper"
                    },
                    event_ele_conf:`{
                        turnpage:function(data){ // 翻页事件
                            console.log(data);
                        },
                        mounted: function(){},
                    }`,
                    intf: {},
                    cmpt_class:[],
                    cmpt_style:{}
                }
            }
        }
    },
    data () {
        return{
            pageData:{}
        }
    },
    created(){
        if(typeof(this.datas.attr_data_conf) == 'string'){
            try{
                this.pageData = new Function(`return ${this.datas.attr_data_conf}`)()
            }catch(err){
                this.pageData = JSON.parse(this.datas.attr_data_conf)
            }
        }else{
            this.pageData = this.datas.attr_data_conf
        }  
        let extraMethods = new Function(`return ${this.datas.event_ele_conf}`)();
        Object.keys(extraMethods).forEach(key => {
            if(key!=='mounted'){
                this[key] = extraMethods[key].bind(this);
            }
        });
    },
    mounted () {
        let extraMethods = new Function(`return ${this.datas.event_ele_conf}`)();
        if(extraMethods.mounted){//处理事件配置中的mounted
            extraMethods.mounted.bind(this)();
        }
    },
    methods: {
        // pageSize 改变时会触发
        sizeChange(val){
            this.pageData.pagesize = val;
        },
        // 当前页码改变时触发 改变时会触发，上一页，下一页都会触发该事件
        currentPageChange(val){
            const params = {
                currentPage: val,
                pagesize: this.pageData.pagesize
            }
            return this.turnpage(params);
        }
    }
}
</script>
<style lang="less" scoped>
.panination {
    margin:5px 0;
    display: flex;
    flex:none;
    justify-content: flex-end;
}
</style>